<template>
  <div class="home">
    <div id="main" style="width: 500px; height: 500px"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "HomeView",
  components: {
    HelloWorld,
  },
  mounted() {
    this.aa();
  },
  methods: {
    aa() {
      var chartDom = document.getElementById("main");
      //获取div
      var myChart = this.$echarts.init(chartDom);
      //在这个div里初始化echarts图表
      var option;

      option = {
        xAxis: {
          type: "category",
          data: ["周一", "周二", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        //x轴
        yAxis: {
          type: "value",
        },
        //y轴
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 30],
            //要展示的数据
            type: "bar",
            //图表的类型 bar 柱状图 line折线图
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      //这个图标展示的内容

      option && myChart.setOption(option);
      //把这个图表的配置 注入进图表
    },
  },
};
</script>
